<template>
  <div class="clothing-style-container">
    <div class="page-header">
      <h2>服装款式</h2>
      <p>浏览我们的服装款式，选择适合您的定制风格</p>
      
      <div class="filter-container">
        <el-input
          v-model="searchQuery"
          placeholder="搜索款式名称"
          clearable
          class="filter-item"
          @clear="handleFilter"
          @input="handleFilter"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        
        <el-select v-model="categoryFilter" placeholder="选择类别" clearable class="filter-item" @change="handleFilter">
          <el-option v-for="item in categoryOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        
        <el-select v-model="seasonFilter" placeholder="选择季节" clearable class="filter-item" @change="handleFilter">
          <el-option v-for="item in seasonOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
    </div>
    
    <el-row :gutter="20" class="style-grid">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="style in filteredStyles" :key="style.id" class="style-item-col">
        <el-card class="style-card" :body-style="{ padding: '0px' }" shadow="hover">
          <div class="style-image-container" @click="viewStyleDetail(style)">
            <el-image :src="style.imageUrl" fit="cover" class="style-image" />
            <div class="style-overlay">
              <el-button type="primary" size="small" round>查看详情</el-button>
            </div>
          </div>
          <div class="style-info">
            <div class="style-name">{{ style.name }}</div>
            <div class="style-category">{{ style.category }}</div>
            <div class="style-tags">
              <el-tag size="small" v-if="style.season">{{ style.season }}</el-tag>
              <el-tag size="small" type="success" v-if="style.isNew">新款</el-tag>
              <el-tag size="small" type="warning" v-if="style.isHot">热门</el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-empty v-if="filteredStyles.length === 0" description="暂无匹配的款式" />
    
    <!-- 款式详情对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="款式详情"
      width="700px"
      destroy-on-close
    >
      <div class="style-detail" v-if="currentStyle">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="style-detail-images">
              <el-image :src="currentStyle.imageUrl" fit="cover" class="main-image" />
              <div class="thumbnail-list">
                <div v-for="(image, index) in currentStyle.extraImages" :key="index" class="thumbnail-item">
                  <el-image :src="image" fit="cover" class="thumbnail-image" />
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="style-detail-info">
              <h3 class="style-detail-name">{{ currentStyle.name }}</h3>
              <el-divider />
              <div class="style-detail-item">
                <span class="label">类别:</span>
                <span class="value">{{ currentStyle.category }}</span>
              </div>
              <div class="style-detail-item">
                <span class="label">设计师:</span>
                <span class="value">{{ currentStyle.designer }}</span>
              </div>
              <div class="style-detail-item">
                <span class="label">季节:</span>
                <span class="value">{{ currentStyle.season }}</span>
              </div>
              <div class="style-detail-item">
                <span class="label">发布时间:</span>
                <span class="value">{{ currentStyle.releaseDate }}</span>
              </div>
              <el-divider />
              <div class="style-detail-desc">
                <h4>款式描述</h4>
                <p>{{ currentStyle.description }}</p>
              </div>
              <div class="style-detail-features">
                <h4>特点</h4>
                <ul>
                  <li v-for="(feature, index) in currentStyle.features" :key="index">{{ feature }}</li>
                </ul>
              </div>
              <div class="style-detail-actions">
                <el-button type="primary" @click="useThisStyle">使用此款式</el-button>
                <el-button type="success" @click="saveToFavorites">收藏款式</el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'ClothingStyle',
  components: {
    Search
  },
  setup() {
    const router = useRouter()
    
    // 筛选条件
    const searchQuery = ref('')
    const categoryFilter = ref('')
    const seasonFilter = ref('')
    
    // 类别选项
    const categoryOptions = [
      { value: '上衣', label: '上衣' },
      { value: '裤装', label: '裤装' },
      { value: '裙装', label: '裙装' },
      { value: '外套', label: '外套' },
      { value: '西装', label: '西装' }
    ]
    
    // 季节选项
    const seasonOptions = [
      { value: '春秋', label: '春秋' },
      { value: '夏季', label: '夏季' },
      { value: '冬季', label: '冬季' },
      { value: '四季', label: '四季' }
    ]
    
    // 款式数据
    const styleList = ref([
      {
        id: 1,
        name: '经典修身西装',
        category: '西装',
        season: '四季',
        designer: '张设计',
        description: '经典修身剪裁，适合各种正式场合，展现专业形象。采用优质面料，穿着舒适透气。',
        imageUrl: 'https://via.placeholder.com/400x500?text=西装',
        extraImages: [
          'https://via.placeholder.com/100x100?text=西装1',
          'https://via.placeholder.com/100x100?text=西装2',
          'https://via.placeholder.com/100x100?text=西装3'
        ],
        features: ['修身剪裁', '单排扣设计', '可选多种面料', '内衬精致'],
        isNew: true,
        isHot: true,
        releaseDate: '2023-02-15'
      },
      {
        id: 2,
        name: '休闲连帽外套',
        category: '外套',
        season: '春秋',
        designer: '李设计',
        description: '舒适休闲的连帽外套，适合日常穿着。采用柔软面料，兼具保暖和时尚。',
        imageUrl: 'https://via.placeholder.com/400x500?text=外套',
        extraImages: [
          'https://via.placeholder.com/100x100?text=外套1',
          'https://via.placeholder.com/100x100?text=外套2',
          'https://via.placeholder.com/100x100?text=外套3'
        ],
        features: ['连帽设计', '拉链开合', '内置口袋', '袖口弹性收紧'],
        isNew: false,
        isHot: true,
        releaseDate: '2023-01-10'
      },
      {
        id: 3,
        name: '高腰阔腿裤',
        category: '裤装',
        season: '四季',
        designer: '王设计',
        description: '时尚高腰设计，阔腿剪裁，凸显腿长。适合多种场合穿着，搭配简单上衣即可展现气质。',
        imageUrl: 'https://via.placeholder.com/400x500?text=裤装',
        extraImages: [
          'https://via.placeholder.com/100x100?text=裤装1',
          'https://via.placeholder.com/100x100?text=裤装2',
          'https://via.placeholder.com/100x100?text=裤装3'
        ],
        features: ['高腰设计', '阔腿剪裁', '侧边隐形拉链', '多色可选'],
        isNew: true,
        isHot: false,
        releaseDate: '2023-03-05'
      },
      {
        id: 4,
        name: '棉麻休闲衬衫',
        category: '上衣',
        season: '夏季',
        designer: '赵设计',
        description: '采用优质棉麻面料，透气舒适，适合夏季穿着。宽松版型，休闲百搭。',
        imageUrl: 'https://via.placeholder.com/400x500?text=衬衫',
        extraImages: [
          'https://via.placeholder.com/100x100?text=衬衫1',
          'https://via.placeholder.com/100x100?text=衬衫2',
          'https://via.placeholder.com/100x100?text=衬衫3'
        ],
        features: ['棉麻材质', '宽松版型', '透气舒适', '多色可选'],
        isNew: false,
        isHot: false,
        releaseDate: '2022-12-20'
      },
      {
        id: 5,
        name: 'A字半身裙',
        category: '裙装',
        season: '春秋',
        designer: '刘设计',
        description: '优雅A字剪裁，修饰腿型。适合各种场合，展现女性温柔气质。',
        imageUrl: 'https://via.placeholder.com/400x500?text=裙装',
        extraImages: [
          'https://via.placeholder.com/100x100?text=裙装1',
          'https://via.placeholder.com/100x100?text=裙装2',
          'https://via.placeholder.com/100x100?text=裙装3'
        ],
        features: ['A字剪裁', '高腰设计', '隐形拉链', '衬里处理'],
        isNew: true,
        isHot: true,
        releaseDate: '2023-02-28'
      },
      {
        id: 6,
        name: '长款风衣',
        category: '外套',
        season: '春秋',
        designer: '钱设计',
        description: '经典长款风衣，防风防雨。翻领设计，腰带收腰，展现优雅身姿。',
        imageUrl: 'https://via.placeholder.com/400x500?text=风衣',
        extraImages: [
          'https://via.placeholder.com/100x100?text=风衣1',
          'https://via.placeholder.com/100x100?text=风衣2',
          'https://via.placeholder.com/100x100?text=风衣3'
        ],
        features: ['双排扣', '腰带设计', '防风面料', '内衬保暖'],
        isNew: false,
        isHot: true,
        releaseDate: '2023-01-15'
      }
    ])
    
    // 筛选后的数据
    const filteredStyles = computed(() => {
      let result = styleList.value
      
      if (searchQuery.value) {
        result = result.filter(item => 
          item.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
          item.description.toLowerCase().includes(searchQuery.value.toLowerCase())
        )
      }
      
      if (categoryFilter.value) {
        result = result.filter(item => item.category === categoryFilter.value)
      }
      
      if (seasonFilter.value) {
        result = result.filter(item => item.season === seasonFilter.value)
      }
      
      return result
    })
    
    // 筛选处理
    const handleFilter = () => {
      // 如果需要调用API，这里可以添加API调用逻辑
    }
    
    // 款式详情
    const dialogVisible = ref(false)
    const currentStyle = ref(null)
    
    const viewStyleDetail = (style) => {
      currentStyle.value = style
      dialogVisible.value = true
    }
    
    // 使用此款式
    const useThisStyle = () => {
      router.push({
        path: '/custom/submit',
        query: { styleId: currentStyle.value.id }
      })
      dialogVisible.value = false
      ElMessage.success('已选择该款式，请继续完成定制')
    }
    
    // 收藏款式
    const saveToFavorites = () => {
      ElMessage.success('款式收藏成功')
      dialogVisible.value = false
    }
    
    // 初始化
    onMounted(() => {
      // 可以在这里调用API获取款式数据
    })
    
    return {
      searchQuery,
      categoryFilter,
      seasonFilter,
      categoryOptions,
      seasonOptions,
      styleList,
      filteredStyles,
      handleFilter,
      dialogVisible,
      currentStyle,
      viewStyleDetail,
      useThisStyle,
      saveToFavorites
    }
  }
}
</script>

<style scoped>
.clothing-style-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 500;
}

.page-header p {
  margin: 0 0 20px 0;
  color: #666;
  font-size: 14px;
}

.filter-container {
  display: flex;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}

.filter-item {
  width: 200px;
}

.style-grid {
  margin-bottom: 24px;
}

.style-item-col {
  margin-bottom: 20px;
}

.style-card {
  transition: all 0.3s;
  height: 100%;
}

.style-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.style-image-container {
  position: relative;
  overflow: hidden;
}

.style-image {
  width: 100%;
  height: 280px;
  display: block;
  transition: transform 0.5s;
}

.style-image-container:hover .style-image {
  transform: scale(1.05);
}

.style-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.style-image-container:hover .style-overlay {
  opacity: 1;
}

.style-info {
  padding: 14px;
}

.style-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 6px;
}

.style-category {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
}

.style-tags {
  display: flex;
  gap: 6px;
}

/* 款式详情 */
.style-detail-images {
  margin-bottom: 20px;
}

.main-image {
  width: 100%;
  height: 280px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.thumbnail-list {
  display: flex;
  gap: 8px;
}

.thumbnail-item {
  width: 70px;
  height: 70px;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
}

.thumbnail-image {
  width: 100%;
  height: 100%;
  transition: all 0.3s;
}

.thumbnail-item:hover .thumbnail-image {
  transform: scale(1.1);
}

.style-detail-name {
  font-size: 20px;
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 16px;
}

.style-detail-item {
  margin-bottom: 10px;
  display: flex;
}

.style-detail-item .label {
  font-weight: 500;
  width: 80px;
  color: #666;
}

.style-detail-desc {
  margin-bottom: 16px;
}

.style-detail-desc h4,
.style-detail-features h4 {
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 8px;
}

.style-detail-desc p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

.style-detail-features ul {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.8;
}

.style-detail-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}
</style> 